import React from 'react';
import bg from "../../assets/images/profile/bg.png"// 背景图
import avatar from "../../assets/images/profile/avatar.png"// 头像
import join from "../../assets/images/profile/join.png"
import {Button} from "antd-mobile"
let nav=[// 导航数据
    {txt:"我的收藏",icon:"icon-coll"},
    {txt:"我的出租",icon:"icon-ind"},
    {txt:"看房记录",icon:"icon-record"},
    {txt:"成为房主",icon:"icon-identity"},
    {txt:"个人资料",icon:"icon-myinfo"},
    {txt:"联系我们",icon:"icon-cust"},
]

class My extends React.Component {
    render() { 
        return <div>
           {/* 背景 */}

           <div style={{position:"relative",height:"300px"}}>
               <img width="100%" src={bg}/>
               <div style={{
                   width:"80%",
                   position:"absolute",
                   height:"180px",
                   background:"white",
                   bottom:0,
                   left:"50%",
                   transform:"translateX(-50%)",
                   boxShadow:"#928f8f 1px -1px 13px"

               }}>
                  <div style={{
                      margin:"-40px auto",
                      width:"80px",
                      height:"80px",
                      borderRadius:"50%",
                      border:"5px solid white",
                      boxShadow:"#928f8f 1px -1px 13px"

                      
                  }}>
                      <img width="100%" src={avatar}/>
                  </div>
                  <div>
                      <p style={{
                          margin:"45px",
                          textAlign:"center"
                      }}>游客</p>
                  </div>
                  <div>
                      <p style={{
                          margin:"5px",
                          display:"flex",
                          justifyContent:"center"
                      }}>
                          <Button size="small" style={{background:"yellowgreen",width:"80px"}}>登录</Button>
                      </p>
                  </div>
               </div>
           </div>


           {/* 导航 */}

           <div style={{
               background:"white",
               height:"205px",
               display:"flex",
               justifyContent:"space-between",
               flexWrap:"wrap"
           }}>
               {
                   nav.map(v=>{
                       return <div style={{
                           width:"100px",
                           display:"flex",
                           flexDirection:"column",
                           justifyContent:"center",
                           alignItems:"center"
                       }}>
                           <div style={{margin:"10px"}}>
                               <i className={`iconfont ${v.icon}`}></i>
                           </div>
                           <div>
                               {v.txt}
                           </div>
                       </div>

                   })
               }
           </div>

           <div style={{
               boxSizing:"border-box",
               padding:"10px"
           }}>
               <img width="100%" src={join}/>
           </div>
        </div>;
    }
}
 
export default My;